<script setup>
import NavigationBarStricky from "@/views/Common/NavigationBarSticky.vue";
import NavigationBar from "@/views/Common/NavigationBar.vue";
import PageFooter from "@/views/Common/PageFooter.vue";
import PageHeader from "@/views/Common/PageHeader.vue";
import Home_Info from "@/views/HomePage/Home_Info.vue";
import Question_Class from "@/views/Expert/Question_Class.vue";
import ExpertHome_Photo from "@/views/Expert/ExpertHome_Photo.vue";
import { ref, onMounted } from 'vue';
import { View, ChatDotRound, User, Document, QuestionFilled, ArrowRight } from '@element-plus/icons-vue';
import http from "@/utils/http.js";
import {getQuestionsByUidAPI} from '@/apis/expert.js'
import {getExpertsAPI} from '@/apis/home.js'
import router from "@/router/index.js";
import SmallQACard from "@/components/card/SmallQACard.vue";
//推荐文章
const RecArticle = ref([])
const expertList=ref([])
const questionList=ref([])

//获取文章内容
const getArticleContent = async () =>{
  try{
    const response = await http.get(`/expert/articleCard`)
    RecArticle.value = response.data
    console.log(response)
  }catch (error){
    console.error('获取文章内容失败:',error)
  }
}
//获取专家
async function getExpert() {
  getExpertsAPI().then(res=>{
    expertList.value=res.data
  })
}
//获取问答
async function getQuestion() {
  getQuestionsByUidAPI(148).then(res=>{
    questionList.value=res.data
  })
}



onMounted(() => {
  getArticleContent()
  getExpert()
  getQuestion()
})
</script>

<template>
  <NavigationBarStricky></NavigationBarStricky>
  <PageHeader></PageHeader>
  <navigation-bar></navigation-bar>

  <div class="ExpertMainPage">
    <div class="top">
      <!--商品种类-->
      <Question_Class></Question_Class>
      <!--商品轮播图-->
      <ExpertHome_Photo></ExpertHome_Photo>
      <!--我的信息-->
      <Home_Info></Home_Info>
    </div>

    <div class="middle">

      <div class="ex1">
        <div class="section-header">
          <span class="section-title">农技专家</span>
          <span class="section-subtitle">专业团队为您提供技术支持</span>
        </div>
        <div class="ex1-cards">
          <div class="ex1-card" v-for="expert in expertList" @click="router.push(`/expert/detail/${expert.uid}`)">
            <div class="expert-card">
              <div class="expert-avatar">
                <el-avatar :size="60" :fit="'cover'" :src="expert.expert_avatar" />
                <div class="status-badge" v-if="expert.is_online">
                  <span class="status-dot"></span>
                  <span class="status-text">在线</span>
                </div>
              </div>
              <div class="expert-info">
                <div class="expert-header">
                  <h3 class="expert-name">{{expert.name}}</h3>
                  <el-button class="consult-btn" size="small" type="primary">
                    <el-icon><ChatDotRound /></el-icon>
                    立即咨询
                  </el-button>
                </div>
                <div class="expert-details">
                  <div class="expert-field">
                    <el-icon><User /></el-icon>
                    <span>{{expert.belong}}</span>
                  </div>
                  <div class="expert-desc">
                    <el-icon><Document /></el-icon>
                    <span>{{expert.descri}}</span>
                  </div>
                </div>
                <div class="expert-stats">
                  <div class="stat-item">
                    <span class="stat-number">{{expert.guidances}}</span>
                    <span class="stat-label">咨询量</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-number">{{expert.replies}}</span>
                    <span class="stat-label">回复量</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-number">{{expert.guidances==='0'?0:(100*expert.replies/expert.guidances).toFixed(1)}}%</span>
                    <span class="stat-label">回复率</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="ex2">
        <div class="section-header">
          <span class="section-title">专家问答</span>
          <span class="section-subtitle">最新专业解答</span>
        </div>
        <div class="qa-container">
          <div class="qa-card" v-for="item in questionList" @click="router.push(`/question/${item.qid}`)">
            <div class="qa-header">
              <div class="question-badge">
                <el-icon><QuestionFilled /></el-icon>
                <span>问题</span>
              </div>
              <div class="qa-date">{{ item.expert_date.split(' ')[0] }}</div>
            </div>
            <div class="question-content">
              {{ item.user_ques }}
            </div>
            <div class="answer-section">
              <div class="answer-badge">
                <el-icon><ChatDotRound /></el-icon>
                <span>解答</span>
              </div>
              <div class="answer-content">
                {{ item.expert_ans }}
              </div>
            </div>
            <div class="qa-footer">
              <span class="answer-count">{{ item.adoptNumbers }} 个回答</span>
              <el-icon class="arrow-icon"><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </div>

      <div class="ex3">
        <div class="section-header">
          <span class="section-title">最新文章</span>
          <span class="section-subtitle">专业技术分享</span>
        </div>
        <div class="ex3-cards">
          <div v-for="article in RecArticle"
               :key="article.article_id"
               class="ex3-card"
               @click="router.push(`/expert/articleDetail/${article.article_id}`)">
            <div class="article-image">
              <img :src="article.cover_image" alt="文章封面">
              <div class="image-overlay">
                <el-icon class="view-icon"><View /></el-icon>
              </div>
            </div>
            <div class="card-content">
              <h3 class="title">{{ article.title }}</h3>
              <div class="article-meta">
                <span class="source">智农销-农技学堂</span>
                <span class="views">
                  <el-icon><View /></el-icon> 
                  {{ article.view_count || 0 }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>


  <PageFooter></PageFooter>
</template>

<style lang="less" scoped>
.ExpertMainPage {
  background: linear-gradient(180deg, #f8fffe 0%, #f5f7fa 100%);
  padding: 0 100px 50px 100px;
  min-height: 100vh;

  .top {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
  }

  .middle {
    gap: 30px;
    align-items: center;
    flex-direction: column;
    display: flex;
    justify-content: center;
  }
}

.ex1{
  background: linear-gradient(135deg, #f8fffe 0%, #f0f9ff 100%);
  border-radius: 16px;
  width: 1160px;
  padding: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.8);

  .section-header {
    margin-bottom: 25px;
    display: flex;
    align-items: baseline;
    gap: 15px;

    .section-title {
      font-size: 28px;
      font-weight: 700;
      color: #1a1a1a;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #39bf3e, #14c131);
        border-radius: 2px;
      }
    }

    .section-subtitle {
      font-size: 14px;
      color: #666;
      font-weight: 400;
    }
  }

  .ex1-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
  }

  .ex1-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(57, 191, 62, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 40px rgba(57, 191, 62, 0.15);
      border-color: #39bf3e;
    }

    .expert-card {
      display: flex;
      padding: 25px;
      gap: 20px;
      height: 100%;
    }

    .expert-avatar {
      position: relative;
      flex-shrink: 0;

      .status-badge {
        position: absolute;
        bottom: -5px;
        right: -5px;
        background: #ffffff;
        border-radius: 12px;
        padding: 4px 8px;
        display: flex;
        align-items: center;
        gap: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border: 1px solid #e8f5e8;

        .status-dot {
          width: 8px;
          height: 8px;
          background: #39bf3e;
          border-radius: 50%;
          animation: pulse 2s infinite;
        }

        .status-text {
          font-size: 10px;
          color: #39bf3e;
          font-weight: 500;
        }
      }
    }

    .expert-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .expert-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .expert-name {
        font-size: 18px;
        font-weight: 600;
        color: #1a1a1a;
        margin: 0;
        transition: color 0.2s;

        &:hover {
          color: #39bf3e;
        }
      }

      .consult-btn {
        background: linear-gradient(135deg, #39bf3e, #14c131);
        border: none;
        border-radius: 8px;
        font-weight: 500;
        padding: 8px 16px;
        transition: all 0.2s;

        &:hover {
          transform: scale(1.05);
          box-shadow: 0 4px 12px rgba(57, 191, 62, 0.3);
        }
      }
    }

    .expert-details {
      display: flex;
      flex-direction: column;
      gap: 8px;

      .expert-field, .expert-desc {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #666;
        
        .el-icon {
          color: #39bf3e;
          font-size: 14px;
        }
      }

      .expert-desc {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.4;
      }
    }

    .expert-stats {
      display: flex;
      gap: 20px;
      padding-top: 8px;
      border-top: 1px solid #f0f0f0;

      .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;

        .stat-number {
          font-size: 16px;
          font-weight: 700;
          color: #39bf3e;
        }

        .stat-label {
          font-size: 11px;
          color: #999;
          font-weight: 500;
        }
      }
    }
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.ex2{
  background: #ffffff;
  border-radius: 16px;
  width: 1160px;
  padding: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.8);

  .section-header {
    margin-bottom: 25px;
    display: flex;
    align-items: baseline;
    gap: 15px;

    .section-title {
      font-size: 28px;
      font-weight: 700;
      color: #1a1a1a;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #ff862c, #ff6b35);
        border-radius: 2px;
      }
    }

    .section-subtitle {
      font-size: 14px;
      color: #666;
      font-weight: 400;
    }
  }

  .qa-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 20px;
  }

  .qa-card {
    background: linear-gradient(135deg, #fff9f5 0%, #ffffff 100%);
    border: 1px solid rgba(255, 134, 44, 0.1);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: linear-gradient(180deg, #ff862c, #ff6b35);
      opacity: 0;
      transition: opacity 0.3s;
    }

    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 40px rgba(255, 134, 44, 0.15);
      border-color: #ff862c;

      &::before {
        opacity: 1;
      }

      .arrow-icon {
        transform: translateX(5px);
      }
    }

    .qa-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .question-badge {
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(20, 193, 49, 0.1);
        color: #14c131;
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;

        .el-icon {
          font-size: 14px;
        }
      }

      .qa-date {
        font-size: 12px;
        color: #999;
      }
    }

    .question-content {
      font-size: 14px;
      font-weight: 500;
      color: #1a1a1a;
      margin-bottom: 15px;
      line-height: 1.5;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .answer-section {
      margin-bottom: 15px;

      .answer-badge {
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 134, 44, 0.1);
        color: #ff862c;
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 8px;
        width: fit-content;

        .el-icon {
          font-size: 14px;
        }
      }

      .answer-content {
        font-size: 13px;
        color: #666;
        line-height: 1.5;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }

    .qa-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 12px;
      border-top: 1px solid #f0f0f0;

      .answer-count {
        font-size: 12px;
        color: #999;
      }

      .arrow-icon {
        color: #ff862c;
        font-size: 14px;
        transition: transform 0.2s;
      }
    }
  }
}

.ex3 {
  background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
  border-radius: 16px;
  width: 1160px;
  padding: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.8);

  .section-header {
    margin-bottom: 25px;
    display: flex;
    align-items: baseline;
    gap: 15px;

    .section-title {
      font-size: 28px;
      font-weight: 700;
      color: #1a1a1a;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #6eb3e8, #4a90e2);
        border-radius: 2px;
      }
    }

    .section-subtitle {
      font-size: 14px;
      color: #666;
      font-weight: 400;
    }
  }

  .ex3-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
  }

  .ex3-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(110, 179, 232, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;

    &:hover {
      transform: translateY(-8px);
      box-shadow: 0 16px 48px rgba(110, 179, 232, 0.2);
      border-color: #6eb3e8;

      .article-image .image-overlay {
        opacity: 1;
      }

      .title {
        color: #4a90e2;
      }
    }

    .article-image {
      position: relative;
      width: 100%;
      height: 160px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s;
      }

      .image-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s;

        .view-icon {
          color: #ffffff;
          font-size: 32px;
        }
      }

      &:hover img {
        transform: scale(1.05);
      }
    }

    .card-content {
      padding: 20px;
      flex: 1;
      display: flex;
      flex-direction: column;

      .title {
        font-size: 16px;
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 12px;
        line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        transition: color 0.2s;
      }

      .article-meta {
        margin-top: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 12px;
        border-top: 1px solid #f0f0f0;

        .source {
          font-size: 12px;
          color: #666;
          font-weight: 500;
        }

        .views {
          font-size: 12px;
          color: #6eb3e8;
          display: flex;
          align-items: center;
          gap: 4px;
          font-weight: 500;

          .el-icon {
            font-size: 14px;
          }
        }
      }
    }
  }
}




.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}


</style>